<template>
  <div class="index">
    <!-- 頭部 -->
    <my-header class="my_header" :style="`left:${left}px;`" @handlePageEvent="handlePageEvent"></my-header>
    <div class="index_content">
      <!-- 菜單 -->
      <my-menu class="my_menu" :style="`left:${left}px;`"></my-menu>
      <div class="content">
        <!-- 標題 -->
        <my-title ref="myTitle" class="my_title"></my-title>
        <!-- 主要內容 -->
        <div class="page_content">
          <transition name="pageFade">
            <router-view ref="myPage" @handleTitleEvent="handleTitleEvent" />
          </transition>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import myHeader from "../components/header";
import myMenu from "../components/menu";
import myTitle from "../components/title";
import { removeEvent,addEvent,getScroll } from '../assets/js/utils';
export default {
  components: {
    myHeader,
    myMenu,
    myTitle
  },
  data(){
    return{
      left : 0,
    }
  },
  destroyed(){
    removeEvent(window,'scroll.fixed');
    removeEvent(window,'resize.fixed');
  },
  created(){
    addEvent(window,'scroll.fixed',() => {
      let scroll = getScroll();
      this.left = scroll.left * -1;
    });
  },
  methods: {
    handleTitleEvent: function(eventName, data) {
      let fn = this.$refs.myTitle[eventName];
      if (typeof fn === "function") fn(data);
    },
    handlePageEvent: function(eventName, data) {
      let fn = this.$refs.myPage[eventName];
      if (typeof fn === "function") fn(data);
    },
  }
};
</script>

<style lang="scss" scoped>
@import "../assets/css/common.scss";
.index {
  height: 100%;
  min-width: $width;
  min-height: $height;
  // 頭部
  .my_header {
    height: $headerHeight;
    position: fixed;
    top: 0;
    right: 0;
  }

  .index_content {
    height: 100%;
    position: relative;
    padding-top: $headerHeight;
    min-height: $height - $headerHeight;
    // 菜單
    .my_menu {
      padding-top: $headerHeight;
      position: absolute;
      left: 0;
      top: 0;
      width: $menuWidth;
      z-index: 1;
      background-size: contain;
      min-height: 100%;
      position: fixed;
      top: 0;
    }

    .content {
      height: 100%;
      padding-left: $contentPadding;
      position: relative;
      // 標題
      .my_title {
        height: $titleHeight;
        position: relative;
      }
      //主要內容
      .page_content {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        padding-left: $contentPadding;
        padding-top: $titleHeight;
        padding-right: $contentPaddingRight;
        padding-bottom: $contentPaddingBottom;
        color: #606266;
      }
    }
  }
}
</style>
